<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>关于element-ui 表格相关的不同版本之间的测试</title>
	<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">

	 <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <meta charset="UTF-8">
    <!-- <title>贵州省数据信访融合平台-数据较验平台</title> -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="edge"/>
    <meta name="renderer" content="webkit">
    <meta name="description" content="">
</head>
<body >
	<div id='demo'>
		<h1 style="text-align: center;">element 不同版本之间固定左侧数据,在设置高度时，页面乱码问题</h1>
		<div class="table-content">
			<el-table
				:height='720'
				:data='tableData'
			>
				<el-table-column
                        v-for="(item,i) in col"
                        :key="'lev1-'+i"
                        show-overflow-tooltip
                        :header-align="item.headerAlign"
                        :align="item.align"
                        :type="item.type"
                        :fixed="item.fixed"
                        :prop="item.prop"
                        :label="item.label"
                        :width="item.width"
                        :class-name="item.className"
                        :sortable="item.sortable"
                        >
                </el-table-column>
                <el-table-column
                        fixed= 'right'
                        label='操作'
                        align= 'center'
                        width= '60'
                        class-name="aboutCell"
                        v-if="false"
                >
                    <template slot-scope='scope'>
                        <div class="zt-btns HTflex-bc">
                            <el-tooltip
                                    v-for='(item,index) in czOpt'
                                    :enterable="false"
                                    class="item"
                                    content="item.label"
                                    placement="top">
                                <div @click="tableTodo(item,scope.row)">
                                    <i :class="item.icon"></i>
                                </div>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
			</el-table>
		</div>
	</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
<script type="text/javascript">
	let vm = new Vue({
		el:"#demo",
		data(){
			return {
				tableData:[],// 表格数据
				col:[],//表头的配置
			}
		},
		created(){
			this.setTableCol();
			this.getTableData();
		},
		methods:{
			/**
			 * 设置表格的表头
			 */
			setTableCol(){
				const col = [
					{
						prop:"index",
						fixed:'left',
						label:'序号',
						width:220
					},{
						prop:'c1',
						label:'c1'
					},{
						prop:"c2",
						label:'c2'
					},{
						prop:'c3',
						label:'c3'
					},{
						prop:'c4',
						label:'c4',
						width:864
					},{
						prop:'c5',
						label:'c5',
						width:770
					},{
						prop:'c6',
						label:'c6',
						width:677
					}
				];
				this.col = col;
			},
			/**
			 * 获取表格数据
			 */
			getTableData(){
				let data = [];
				data = [
					{
						index:'354few4543fefewf43t',
						c1:'c1的内容部分',
						c2:'c2的内容部分',
						c3:'c3的部分',
						c4:'c4的部分',
						c5:'this is c5',
						c6:'c6 is here'
					}
				];
				this.tableData = data;
			},
		}
	})
</script>
</html>